<template>
	<view class="comp-base-page-box">
		<!--顶部导航栏-->
		<c-base-navbar :showNavbar="showNavbar" :isShowBack="isShowBack" :title="navText"></c-base-navbar>
		<view class="page-main-box" :class="!showTabbar ? 'page-main-notabbar' : ''" @click="mxGlobalNavBarListEmit">
			<view class="page-sidebar-box" v-if="false">
				<!--项目需要的测边栏-->
				<view :class="!$isPc ? 'page-sidebar-mobile' : 'page-sidebar'" v-if="isShowSidebar" @click="showSidebar">
					<c-item-sidebar class="sidebar-item"></c-item-sidebar>
				</view>
				<!--手机版显示悬浮菜单按钮，点击显示侧边栏-->
				<view id="fabMenu" class="page-fab-menu" :style="movePosition" v-else @click="showSidebar" @touchstart="fabTouchStart" @touchmove="fabTouchmove">
					<u-icon name="grid-fill" color="#1cbbb4" size="28"></u-icon>
				</view>
			</view>
			<view class="page-content">
				<slot></slot>
			</view>
		</view>
		<!--导航栏----暂时不用，沿用原生导航-->
		<!--#ifdef APP-PLUS || H5-->
		<!--<view @click="mxGlobalNavBarListEmit">
			<c-base-ctabbar :current="current" :showTabbar="showTabbar" :tabbars="curTabbars"></c-base-ctabbar>
		</view>-->
		<!--#endif-->
	</view>
</template>

<script>
	/**
	 * ***************tabbar***************
	 * current: tabbar下标
	 * showTabbar: 是否显示底部导航栏
	 * tabbars: 底部导航栏配置(参考mxConfigs.js的配置)
	 * 
	 * ***************navbar***************
	 * showNavbar: 是否显示顶部导航栏
	 * isShowBack: 是否显示顶部导航栏返回按钮
	 * navText: 顶部导航栏标题
	**/
	export default {
		name: "c-base-page",
		props: {
			// tabbar相关配置
			current: {
				type: Number,
				default: null
			},
			showTabbar: {
				type: Boolean,
				default: true
			},
			tabbars: {
				type: Array,
				default: () => {
					return []
				}
			},
			// navbar相关配置
			showNavbar: {
				type: Boolean,
				default: true
			},
			isShowBack: {
				type: Boolean,
				default: true
			},
			navText: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				isShowSidebar: false,
				fabDefaultLeft: 5,
				fabDefaultBottom: 120,
				movePosition: {},
				windowInfo: {}
			}
		},
		computed: {
			// 定义当前的导航栏
			curTabbars: {
				get() {
					let curTabbars = []
					if (this.tabbars && this.tabbars.length > 0) {
						// 界面传递过来的自定义导航栏
						curTabbars = JSON.parse(JSON.stringify(this.tabbars))
					}
					return curTabbars
				},
				set(v) {
					this.$emit('update:tabbars', v)
				}
			}
		},
		async mounted() {
			// 页面异步加载
			await this.$onLaunched
			// 初始化页面
			this.initPages()
		},
		methods: {
			// 初始化界面
			initPages() {
				this.movePosition = { left: `${this.fabDefaultLeft}px`, bottom: `${this.fabDefaultBottom}px` }
				// this.getHasLogin()
				// 判断是否需要显示sidebr
				this.isShowSidebar = this.$isPc ? true : false
			},
			// 判断是否登录
			getHasLogin() {
				if (!this.$hasLogin) {
					this.mxToast("暂未登录，请先登录!", { time: 2000, mask: true }, () => {
						uni.reLaunch({
							url: "/pages/common/login/login"
						})
					})
				}
			},
			// 移动端切换显示
			showSidebar() {
				if (!this.$isPc) {
					this.isShowSidebar = !this.isShowSidebar
				}
			},
			// 触摸fab，菜单按钮
			fabTouchStart(e) {
				let that = this
				uni.getSystemInfo({
					success: (res) => {
						let query = uni.createSelectorQuery().in(this);
						query.select('#fabMenu').boundingClientRect(data => {
							let touche = e.touches && e.touches[0]
							let pagex = Math.floor(touche.pageX)
							let pagey = Math.floor(touche.pageY)
							
							this.windowInfo = res
							this.windowInfo.fabLeft = data.left
							this.windowInfo.fabRight = data.right
							this.windowInfo.fabTop = data.top
							this.windowInfo.fabBottom = data.bottom
							this.windowInfo.fabLeftSpace = pagex - data.left // 点击处到按钮左侧距离
							this.windowInfo.fabRightSpace = data.right - pagex // 点击处到按钮右侧距离
							this.windowInfo.fabTopSpace = pagey - data.top // 点击处到按钮顶部距离
							this.windowInfo.fabBottomSpace = data.bottom - pagey // 点基础到按钮底部的距离
						}).exec();
					}
				})
			},
			fabTouchmove(e) {
				let touche = e.touches && e.touches[0]
				let screenWidth = this.windowInfo.screenWidth
				let screenHeight = this.windowInfo.screenHeight
				let pagex = Math.floor(touche.pageX)
				let pagey = Math.floor(touche.pageY)
				let fabLeft = this.fabDefaultLeft
				let fabBottom = this.fabDefaultBottom
				let fabLeftSpace = this.windowInfo.fabLeftSpace
				let fabRightSpace = this.windowInfo.fabRightSpace
				let fabTopSpace = this.windowInfo.fabTopSpace
				let fabBottomSpace = this.windowInfo.fabBottomSpace
				// X坐标位置移动
				if (pagex < (fabLeft + fabLeftSpace)) {
					this.movePosition.left = `${fabLeft}px`
				} else if (pagex > (screenWidth - fabLeft - fabRightSpace)) {
					this.movePosition.left = `${screenWidth - fabLeft - fabLeftSpace - fabRightSpace}px`
				} else {
					this.movePosition.left = `${pagex - fabLeftSpace}px`
				}
				// Y坐标位置移动
				if (pagey < (50 + fabTopSpace)) {
					this.movePosition.bottom = `${screenHeight - 50 - fabTopSpace - fabBottomSpace}px`
				} else if (pagey > (screenHeight - fabBottom - fabBottomSpace)) {
					this.movePosition.bottom = `${fabBottom}px`
				} else {
					this.movePosition.bottom = `${screenHeight - pagey - fabBottomSpace}px`
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	$fab-menu-size: 48px;
	@keyframes fadeIn {
		from {
			background: rgba(0, 0, 0, 0);
		}
		to {
			background: rgba(0, 0, 0, 0.4);
		}
	}
	.comp-base-page-box {
		.page-main-box {
			display: flex;
			height: auto;
			min-height: calc(100vh - 44px);
		}
		.page-main-notabbar {
			height: 100vh;
		}
		.page-sidebar-box {
			.page-sidebar {
				height: 100%;
			}
			.page-sidebar-mobile {
				animation: fadeIn;
				animation-duration: 0.5s;
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 1000000; // 比导航栏高1层
				background: rgba(0, 0, 0, 0.4);
				.sidebar-item {
					height: 100%;
				}
			}
			.page-fab-menu {
				position: fixed;
				left: 5px;
				bottom: 120px;
				padding: 8px;
				text-align: center;
				z-index: 9999998;
				background-color: #d0f0ef;
				border-radius: $fab-menu-size;
			}
		}
		.page-content {
			width: 100%;
		}
	}
</style>
